
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">

        window.onload = function(){

            var u1 = document.getElementById("u1");

            //点击按钮以后添加超链接
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                //创建一个li
                var li = document.createElement("li");
                li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";

                //将li添加到ul中
                u1.appendChild(li);
            };


            /*
             * 为每一个超链接都绑定一个单击响应函数
             * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
             * 	而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
             */
            //获取所有的a
            var allA = document.getElementsByTagName("a");
            //遍历
            /*for(var i=0 ; i<allA.length ; i++){
                allA[i].onclick = function(){
                    alert("我是a的单击响应函数！！！");
                };
            }*/

            /*
             * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
             * 我们可以尝试将其绑定给元素的共同的祖先元素
             *
             * 事件的委派
             * 	- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
             * 		从而通过祖先元素的响应函数来处理事件。
             *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
             */

            //为ul绑定一个单击响应函数
            u1.onclick = function(event){
                event = event || window.event;

                /*
                 * target
                 * 	- event中的target表示的触发事件的对象
                 */
                //alert(event.target);


                //如果触发事件的对象是我们期望的元素，则执行否则不执行
                if(event.target.className == "link"){
                    alert("我是ul的单击响应函数");
                }

            };

        };

    </script>
</head>
<body>
<button id="btn01">添加超链接</button>

<ul id="u1" style="background-color: #bfa;">
    <li>
        <p>我是p元素</p>
    </li>
    <li><a href="javascript:;" class="link">超链接一</a></li>
    <li><a href="javascript:;" class="link">超链接二</a></li>
    <li><a href="javascript:;" class="link">超链接三</a></li>
</ul>

</body>
</html>